<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复制粘贴</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .button_class{
            width: 19.7vw;
            height: 25vh;
            cursor: pointer;
            border: none;
            font-size: 1.5em;
            color: #ffffff;
            opacity: 0.8;
            outline: none;
        }
        .classLH{
            width: 0.2px;
            position: absolute;
            opacity: 0;
        }
        #zhezhao{
            width: 100vw;
            height: 100vh;
            background-color:#4b4b4b;
            display: none;
        }
        #success{
            width: 30vw;
            height: 60px;
            border: 1px solid #cccccc;
            line-height: 60px;
            background-color: #20bf6b;
            border: none;
            text-align: center;
            font-size: 1.3em;
            color: #ffffff;
            position: absolute;
            z-index: 1;
            left: 35vw;
            top: 40vh;
        }
    </style>
</head>
<body>
    <!-- <div id="zhezhao">
        <div id="success">#FC11221复制成功</div>
    </div> -->
    
</body>
</html>


<script>
//需求，编写一个颜色选择器
function loadInput(color){
    //创建input表单
    let input = document.createElement('input');
    input.type = 'text';
    input.classList = 'classLH';
    input.setAttribute('value',color);
    var id_color = color.substr(1);
    input.setAttribute('id',id_color);

    //创建button表单
    let button = document.createElement('button');
    button.type = 'button';
    button.classList = 'button_class';
    let buttonText = document.createTextNode(color);
    button.appendChild(buttonText);
    button.style.backgroundColor = color;

   
    
    
    //遮罩对象
    let zhezhao = document.getElementById('zhezhao');
    //弹窗对象
    let success = document.getElementById("success");
    //添加事件
    button.onmousemove = function(){
        this.style.opacity = 1;
    }
    button.onmouseleave = function(){
        this.style.opacity = 0.8;
    }
    button.onclick = function(){
        const select_color = color.substr(1);
        const input = document.getElementById(select_color);
        console.log(input);
        input.select();
        document.execCommand("copy");
        zhezhao.style.display = 'block';
        zhezhao.style.backgroundColor = color;
        success.style.backgroundColor = color;
        success.style.fontSize = '3em';
        success.innerHTML = '复制成功LH ' + color;
        setTimeout(() => {
            zhezhao.style.display = 'none';
        },600);
    }
    document.body.appendChild(input);
    document.body.appendChild(button);
}

//创建遮罩对象
function loadZZ(){
 //创建遮罩对象
    let div = document.createElement('div');
    div.setAttribute('id','zhezhao');

    //创建弹窗对象
    let div_tan = document.createElement('div');
    div_tan.setAttribute('id','success');

    div.appendChild(div_tan);
    document.body.appendChild(div);

}
let color_arr = [
                 '#fc5c65','#fd9644','#fed330','#26de81','#2bcbba'
                 ,'#eb3b5a','#fa8231','#f7b731','#20bf6b','#0fb9b1'
                 ,'#45aaf2','#4b7bec','#a55eea','#d1d8e0','#778ca3'
                 ,'#2d98da','#8854d0','#a5b1c2','#4b6584','#FD7272'
                ];

//加载遮罩层
loadZZ();
//加载表单
for(let i = 0 ; i <= 19; i++){
    loadInput(color_arr[i]);
}
</script>